<template>
  <div class="nav-bar" >
    <el-card :style="{color: i.isActive? '#3396f9': ''}" @click.native="handleItemClick(i)" class="cursor-pointer" :key="Math.random()" v-for="i in forms" shadow="none"
             :body-style="{position: 'relative', padding: '0'}">
      <div class="nav_status" style="">
        <i class="el-icon-success" v-if="i.status === 'success'"></i>
        <i class="el-icon-warning" v-if="i.status === 'error'"></i>
      </div>
      <i :class="[i.icon]" style="font-size: 20px;height: 30px;line-height: 30px"></i>
      <div style="font-size: 12px">{{i.title}}</div>
    </el-card>


    <el-card @click.native="handleTopClick" class="cursor-pointer" shadow="none"
             :body-style="{position: 'relative', padding: '0'}">
      <i class="el-icon-arrow-up" style="font-size: 20px;height: 30px;line-height: 30px"></i>
      <div style="font-size: 12px">TOP</div>
    </el-card>

  </div>

</template>

<script>
import util from '@/libs/util'
export default {
  props:{
    forms: {type:Array, default(){return []}}
  },
  methods:{
    handleItemClick(i){
      this.$emit("item-click", i)
    },

    activeI(i){
      this.$emit('active', i)
    },

    handleTopClick(){
      this.$emit("top-click")
    }
  }
}
</script>

<style scoped lang="scss">
.is-active{
  color: #3396f9;
}
.nav-bar {
  position: relative;
  position: fixed;
  top: 50%;
  right: 16px;
  transform: translate(0, -50%);
}

.el-card {
  z-index: 1000;
  width: 50px;
  height: 50px;
  font-size: 12px;
  text-align: center;
  margin-top: 0.5em;
  overflow: visible;
  margin-bottom: 0.75em;
  margin-right: 0.5em;
}

.el-icon-success {
  color: #85c64b;
  font-size: 15px;
}

.el-icon-warning {
  color: red;
  font-size: 15px;
}

.nav_status {
  position: absolute;top: 2.5px;right: 2.5px;
  transform: translate(50%,-50%);
  & > i {

  }
}

</style>

